import React from "react";
import styles from "./Index.module.css";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { ChatCheckOutline } from "antd-mobile-icons";
function Index() {
  const nav = useNavigate();
  return (
    <div className={styles.jiaoxiangz}>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)} className={styles.zi}>
          缴费订单详情
        </NavBar>

        <div>
          <ChatCheckOutline
            style={{ marginLeft: "18px", marginTop: "10px", fontSize: "30px" }}
          />
          <span className={styles.jiao}>已缴费</span>
        </div>
      </div>

      <div className={styles.card1} style={{ marginTop: "20px" }}>
        <div style={{ marginLeft: "10px", marginTop: "18px" }}>
          <img src="./txm.png" alt="" />
        </div>
        <div
          style={{ marginLeft: "10px", marginTop: "18px", textAlign: "center" }}
        >
          20200101001598Z
        </div>
        <div
          style={{ marginLeft: "10px", marginTop: "10px", textAlign: "center" }}
        >
          取药或检查时请出示此码
        </div>
      </div>

      <div className={styles.card} style={{ marginTop: "30px" }}>
        <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>缴费信息 </h3>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          就诊人:王小柯
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          登记号:20200101001602A
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          就诊科室:门外诊一科
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          开单医生:刘医师
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          开单时间:2020-01-01 13:20:36
        </div>
      </div>

      <div className={styles.card3} style={{ marginTop: "20px" }}>
        <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>费用明细 </h3>
        <div className={styles.title}>请前往一楼门诊药房2号窗口取药</div>

        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          <span style={{ background: "green", color: "blue" }}>药</span>
          <span style={{ marginLeft: "10px" }}>处方号(2020010103)</span>
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          <span style={{ color: "gray" }}> 1.葆宫芷血颗粒*3盒</span>
          <span style={{ color: "gray", marginLeft: "120px" }}>￥50.13</span>
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          <span style={{ color: "gray" }}> 2.维生素B1*2瓶</span>
          <span style={{ color: "gray", marginLeft: "120px" }}>￥20.00</span>
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          <span style={{ color: "gray" }}> 3.维生素B2*2瓶</span>
          <span style={{ color: "gray", marginLeft: "120px" }}>￥10.00</span>
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          <span style={{ color: "gray" }}> 4.维生素E*2瓶</span>
          <span style={{ color: "gray", marginLeft: "120px" }}>￥10.00</span>
        </div>
        <div
          style={{
            marginLeft: "10px",
            marginTop: "10px",
            borderBottom: "1px solid gray",
          }}
        >
          <span style={{ color: "gray" }}> 5.维生素C*2瓶</span>
          <span style={{ color: "gray", marginLeft: "120px" }}>￥10.00</span>
        </div>

        <div style={{ marginTop: "18px" }}>
          <div className={styles.title1}>请前往一楼门诊药房2号窗口取药</div>

          <div style={{ marginLeft: "50px", marginTop: "10px" }}>
            <span style={{ background: "yellow", color: "blue" }}>药</span>
            <span style={{ marginLeft: "10px" }}>检查单号(2020010103)</span>
          </div>

          <div style={{ marginLeft: "20px", marginTop: "10px" }}>
            <span style={{ color: "gray" }}> 1.CT</span>
            <span style={{ color: "gray", marginLeft: "120px" }}>￥200.00</span>
          </div>

          <div
            style={{
              marginLeft: "20px",
              marginTop: "10px",
              borderBottom: "1px solid gray",
            }}
          >
            <span style={{ color: "gray" }}> 2.上腹部CT平扫</span>
            <span style={{ color: "gray", marginLeft: "120px" }}>￥200.00</span>
          </div>

          <div>
            <h3 style={{ marginLeft: "180px", marginTop: "20px" }}>
              合计:￥520.13
            </h3>
          </div>
        </div>
      </div>

      <div className={styles.card4} style={{ marginTop: "30px" }}>
        <h3 style={{ marginLeft: "10px", paddingTop: "10px" }}>订单信息</h3>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          订单号:2021010156256894
          <span style={{color:"blue",marginLeft:'80px'}}>复制</span>
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          订单流水号:400012021010156256894
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          订单金额:￥520.13
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          订单状态:已支付
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          订单方式:微信支付
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          下单时间:2020-01-01 10:23:36
        </div>
        <div style={{ marginLeft: "10px", marginTop: "10px" }}>
          支付时间:2020-01-01 10:25:10
        </div>
      </div>
    </div>
  );
}

export default Index;
